<template>
  <div class="province-container">
    <div class="row">
      {{ address }}
      <label class="iconfont icon-xiajiantou1"></label>
    </div>
    <div class="province">
      <ul>
        <li class="active">请选择</li>
      </ul>
      <div class="bottom-hr"></div>
      <div class="list">
        <div class="item" v-for="(item, index) in provinces" :key="index" :title="item.zonename">
          <div class="address-item">{{ item.zonename }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchProvince } from '@/api'

export default {
  data () {
    return {
      address: '南京市江宁区秣陵街道',
      provinces: []
    }
  },

  async created () {
    this.provinces = await fetchProvince() || []
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable.less";

.province-container {
  background: @write;
  color: @font-color-six;
  display: inline-block;
  max-width: 380px;
  height: 24px;
  line-height: 22px;
  margin: 0px 10px;
  position: relative;
  .row {
    background: #ffffff;
    border: 1px solid @line-color-light;
    // border-bottom: 0px;
    padding: 0px 14px;
    position: relative;
    z-index: 1;
    .iconfont {
      font-size: 10px;
    }
  }
  .province {
    background: @write;
    border: 1px solid @line-color-light;
    display: none;
    top: 23px;
    left: 0px;
    width: 420px;
    padding: 16px 16px 24px;
    position: absolute;
    ul {
      overflow: hidden;
      li {
        cursor: pointer;
        float: left;
        padding: 0px 14px;
        position: relative;
        z-index: 1;
        &.active {
          border-top: 2px solid @font-color-golden;
          border-left: 2px solid @font-color-golden;
          border-right: 2px solid @font-color-golden;
          border-bottom: 2px solid @write;
        }
      }
    }
    .bottom-hr {
      border-top: 2px solid #b4a078;
      position: relative;
      top: -2px;
    }
    .list {
      max-height: 206px;
      overflow: hidden;
      overflow-y: scroll;
      padding-top: 14px;
      .item {
        cursor: pointer;
        float: left;
        font-size: 12px;
        line-height: 20px;
        width: 80px;
        margin: 0px 10px 6px 0px;
        .address-item {
          height: 20px;
          padding: 0px 4px;
          width: fit-content;
          max-width: 80px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          &:hover {
            background: @font-color-golden;
            color: @write;
          }
        }
      }
    }
  }
  &:hover {
    .row {
      border-bottom: 0px;
    }
    .province {
      display: block;
    }
  }
}
</style>
